Create a sticker sheet in Figma 在 Figma 中建立 Sticker 元件表

Sticker Sheets 簡介（What are Sticker Sheets）

Sticker Sheets（也叫"設計套件"）是設計系統的一部分。它把常用的設計元素（比如顏色、文字、圖示）和元件（比如按鈕、導航欄）放在一起。設計師可以直接複製貼上這些元素，就像使用貼紙一樣方便。

為什麼叫"Sticker"（貼紙）

因為使用起來就像貼紙一樣。設計師可以從 Sticker Sheet 中複製需要的元素，貼上到自己的設計中，既快速又能保持風格統一。

Sticker Sheets 有什麼用

主要好處

• 節省時間：可以快速重複使用元素和元件。

• 保持統一：讓整個設計看起來風格一致。

• 減少出錯：統一管理可以避免顏色、字型用錯。

• 方便合作：團隊成員可以共用同一套設計元素。

• 幫助開發：工程師也能透過它瞭解各個元件的樣式和狀態。

通常包含什麼

以 Dog Walker 應用為例，裡面有：

• 常用顏色

• 按鈕

• 圖示

• 導航欄

• 下拉選單、標籤、使用者卡片

不同狀態

元件不只有一種樣式，還要展示不同的狀態。比如：

• 評論圖示的白色版本（未選中）

• 橙色版本（已選中）

Sticker Sheets 和 Figma 元件的關係

什麼是元件

元件就是把多個元素（文字、顏色、形狀）組合在一起。比如一個按鈕，包含文字、背景色和邊框。

例項的作用

在 Figma 中，你可以建立一個主元件，然後複製出很多例項。當你修改主元件時，所有例項會自動更新。舉個例子：如果你把 Sticker Sheet 中的按鈕從橙色改成藍色，所有用了這個按鈕的地方都會自動變成藍色。

好處

• 所有元件集中管理，很方便。

• 改一次就能更新所有地方，省時省力。

• 保持設計統一，避免重複工作。

怎麼建立 Sticker Sheet

步驟

1. 建立空白畫布：用來放 Sticker Sheet。

2. 複製常用元素：把經常用的設計元素收集到畫布中。

3. 展示不同狀態：比如按鈕的正常、滑鼠懸停、點選等狀態。

4. 命名和分組：方便團隊成員查詢和使用。

比如在 Dog Walker App 中，包括：

• 按鈕（不同顏色和狀態）

• 下拉選項

• 標籤

• 使用者卡片（比如遛狗員資訊）

• 圖示（啟用和未啟用狀態）

Sticker Sheets 對團隊的價值

設計師協作

• 設計師可以用同一份 Sticker Sheet，保持設計風格一致。

• 新成員可以快速上手現有的設計元件。

和開發人員協作

• 工程師可以參考 Sticker Sheet 來準確實現介面。

• Sticker Sheet 也可以當作設計規範使用。